require(['../config'],()=>{
    require(['request', 'template', 'header','bootstrap','footer'],(request, template,header)=>{
        class Shopinfo{
            constructor(){
                this.init().then(value=>{
                    this.scaleImg()
                    this.toggleSmImg()
                    this.addTocart()
                })
            }
            scaleImg(){
                let $mask=$('.content .left .mask')
                let $block=$('.content .left .block')
                let $bigImg=$('.content .left .bigImg>img')
                let $bigImgWarp=$('.content .left .bigImg')
                let $blockW=$block.outerWidth()
                let $maskW=$mask.outerWidth()
                let right=$maskW-$blockW
                $mask.hover(()=>{
                    $block.show()
                    $bigImgWarp.show()
                },()=>{
                    $block.hide()
                    $bigImgWarp.hide()
                })
                $mask.on('mousemove',function(e){
                    let x=e.offsetX-$blockW/2
                    let y=e.offsetY-$blockW/2
                    if(x>right)x=right
                    if(x<0)x=0
                    if(y>right)y=right
                    if(y<0)y=0
                    $block.css({
                        left:x,
                        top:y,
                    })
                    $bigImg.css({
                        left:-2*x,
                        top:-2*y,
                    })
                })
            }

            init(){
                return new Promise(resolve=>{
                    const id=location.search.slice(4)
                    request.getDetail(id).then(val=>{
                        const detail=val.data.detail
                        this.detail=detail
                        $('#detail_warp').append(template('detail',{detail}))
                        $('#payBottom_warp').append(template('payBottom',{detail}))
                        resolve()
                    })
                })
            }

            toggleSmImg(){
                const $bigImg=$('.bigImg img')
                const $middImg=$('.middImg img')
                const $lis=$('.smImg-warp li')
                const $smImgs=$('.smImg-warp img')
                const $left=$('.left')
                let timmer=null
                let i=0
                $smImgs.on('click',function(){
                    $bigImg.attr('src',this.src)
                    $middImg.attr('src',this.src)
                    $lis.removeClass('active')
                    $(this).parent().addClass('active')
                })
                $left.hover(()=>{
                    clearInterval(timmer)
                },()=>{
                    auto()
                })
                auto()
                function auto(){
                    timmer = setInterval(() => {
                        if(i>$smImgs.length-1){
                            i=0
                        }
                        $smImgs.eq(i).trigger ('click')
                        i++
                    }, 1500)
                }
            }

            addTocart(){
                const $addActive=$('.addActive')
                $('.addCart').on('click',()=>{
                    setTimeout(() => {
                        $addActive.hide({duration:500})
                    }, 1000);
                    $addActive.show({duration:200})
                    $('.redDot').show()
                    $('.empty-cart-top').hide()
                    $('.hasCart').show()
                    this.saveShop()
                    header.topCart(this.cart)
                })
            }

            saveShop(){
                this.cart=JSON.parse(localStorage.getItem('cart')||'[]')
                if(this.cart.length>0){
                    const isRepeat = this.cart.some(val=>{
                        return val.id===this.detail.id
                    })
                    console.log(isRepeat)
                    if(isRepeat){
                        this.cart=this.cart.map(val=>{
                            if(val.id===this.detail.id)val.count++
                            return val
                        })
                    }else{
                        this.cart.push({...this.detail,count:1,checked:true})
                    }
                    localStorage.setItem('cart',JSON.stringify(this.cart))
                }else{
                    localStorage.setItem('cart',JSON.stringify([{...this.detail,count:1,checked:true}]))
                    this.cart=JSON.parse(localStorage.getItem('cart')||'[]')
                }
            }
        }
        new Shopinfo()
    })
})
  